<template>
  <div class="search-page">
    <div class="ww">
        <div class="search-input">
            <input type="text" v-model="keyword" @keyup.enter="toSearch">
        </div>
        <div class="title">
            <p>搜索"{{ searchKey }}"，找到<span>{{ musicData.length }}</span>首单曲</p>
        </div>
        <div class="music-list">
            <div :class="index%2===1?'row-color music-item':'music-item'" v-for="(item, index) in musicData" :key="item.id" @click="toSong(item.id, item.songName)">
                <div class="music-name"><i></i><span>{{ item.songName }}</span></div>
                <div class="composer">{{ item.composer }}</div>
                <div class="lyricist">{{ item.lyricist }}</div>
                <div class="duration">{{ item.duration }}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { req, API_SONG_FINDBYNAME } from '@/api/api'
export default {
    data() {
        return {
            keyword: this.$route.params.keyword,
            musicData: [],
            searchKey: this.$route.params.keyword
        }
    },
    created() {
        req.list(API_SONG_FINDBYNAME, { songName: this.searchKey }).then( res => {
            this.musicData = res.rows
        })
    },
    methods: {
        toSearch() {
            this.$router.push({
                path: `/searchPage/${this.keyword}`
            })
            this.$router.go(0)
        },
        toSong(id, songName) {
            this.$router.push({
                path: `/song/${id}/${songName}`
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .search-page {
        .ww {
            padding: 40px;
            background-color: #fff;
            box-sizing: border-box;
            .search-input {
                width: 420px;
                height: 40px;
                margin: 0 auto;
                background: url(../../assets/images/sprite.png) no-repeat 0 0;
                z-index: 10;
                input {
                    float: left;
                    width: 320px;
                    height: 17px;
                    margin: 12px 0 0 20px;
                    padding: 0;
                    background: #fff;
                    border: none;
                    opacity: 1;
                    outline: none;
                }
            }
            .title {
                margin: 28px 0 17px;
                color: #999;
                span {
                    display: inline-block;
                    padding: 0 5px;
                    color: #c20c0c;
                }
            }
            .music-list {
                .music-item {
                    display: flex;
                    color: #333;
                    line-height: 43px;
                    cursor: pointer;
                    .music-name {
                        flex: 1;
                        height: 43px;
                        i {
                            float: left;
                            margin: 13px 8px 0 0;
                            width: 17px;
                            height: 17px;
                            background: url(../../assets/images/table.png) no-repeat 0 -103px;
                        }
                        span {
                            float: left;
                        }
                    }
                    div {
                        padding: 0 20px;
                    }
                    &:hover {
                        background-color: #f2f2f2;
                    }
                }
            }
            .row-color {
                background-color: #f7f7f7;
            }
        }
    }
</style>